<template>
  <div>
    <!-- 路由占位符 -->
    <!-- keep-alive 有一个 include 属性，可以明确指定要缓存的组件的名称 -->
    <!-- keep-alive 还有一个 exclude 属性，可以明确指定哪些组件不需要被缓存 -->
    <!-- 注意：在实际开发中，include 和 exclude 二选一 -->
    <!-- include 属性接收三种格式的数据：字符串、数组、正则 -->
    <keep-alive include="Layout,SearchResult">
      <!-- 只要在 router-view 之外包裹一层 keep-alive 组件，则路由发生切换时，被隐藏的组件不会被销毁 -->
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  // 一定要为创建的组件，通过 name 属性，起一个名字
  // 名字的首字母要大写
  name: 'App',
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 12px;
}
</style>
